<template>
	<view class="flex flex-col">
		<view :class="[props._class]" :style="[_style, props._style]" @click.stop="_onClick" @longpress="longpress">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const props = defineProps({
	...pub_props,
	color: {
		type: String,
	},
	align: {
		type: String,
	},
	label: {
		type: String,
	},
	darkColor: {
		type: String,
	},
	shadow: {
		type: [String, Number],
	},
	height: {
		type: Number,
	},
	linear: {
		type: Boolean,
		default: false,
	},
	border: {
		type: [String, Number],
	},
	borderColor: {
		type: String,
		default: 'gray-500',
	},
	borderDirection: {
		type: String,
		default: 'all',
	},
	_class: {
		type: [String, Array],
	},
	_style: {
		type: [Array, String, Object],
		default: () => [],
	},
});

const _class = computed(() => {
	if (typeof props._class === 'string') {
		return props._class;
	} else {
		return props._class.join(' ');
	}
});
const _style = computed(() => {
	let style = {};

	if (props.height) {
		style['height'] = props.height + 'rpx';
	}
	if (props.border) {
		let direction = props.borderDirection === 'all' ? '' : '-' + props.borderDirection;
		style[`border${direction}`] = `solid ${props.border}rpx`;
		style[`border${direction}-color`] = computedColor(props.borderColor, '', props.theme);
	}

	if (props.color && !props.linear) {
		style['background-color'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (props.color && props.linear) {
		style['background-image'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (props.shadow) {
		if (props.shadow == 1) {
			style['box-shadow'] = '0 2px 2px 0 #ccc';
		}
	}
	return style;
});

const emits = defineEmits(['click', 'longpress']);

function _onClick(event) {
	emits('click', event);
}

//当前是否点按，因为uniapp的hover-class在安卓端有bug，因此采用自定事件来定义hover类。
const isLongPress = ref(false);

function longpress(e: Event) {
	isLongPress.value = true;
	emits('longpress', e);
}

function touchstart(e: Event) {
	isLongPress.value = true;
	emits('touchstart', e);
}

function touchend(e: Event) {
	isLongPress.value = false;
	emits('touchend', e);
}

function touchcancel(e: Event) {
	isLongPress.value = false;
	emits('touchcancel', e);
}

function mousedown(e: Event) {
	isLongPress.value = true;
	emits('mousedown', e);
}

function mouseup(e: Event) {
	isLongPress.value = false;
	emits('mouseup', e);
}

function mouseleave(e: Event) {
	isLongPress.value = false;
	emits('mouseleave', e);
}
</script>

<style scoped></style>
